<template>
    <div>
        <div class="carousel"> 
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(image,index) in handSwipe" :key="index" @click="jump(index)">
            <img v-lazy="image" />
            </van-swipe-item>
      </van-swipe>
  </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            handSwipeIds: [1,2,3],
            handSwipe:[
            'https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1056.png',
            "https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1058.jpg",
            "https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1059.jpg",
            ]
        }
    },
    methods: {
        jump(index) {
            const id = this.handSwipeIds[index]
            console.log(id);
            // 根据id来跳转不同的路由
            this.$router.push({name:'homepageDetail',params:{id}})
        }
    }   
}
</script>

<style lang="scss" scoped>
  .carousel{
    margin-top:15px ;
  }
  .my-swipe{
      .van-swipe-item::v-deep{
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        width: 100%;
        height: 140px;
        img{
         width: 100%;
         height: 100%; 
        }
    }
  }

</style>